<div nz-row>
  <div nz-col [nzSpan]="6" style="float:left">
    <nz-input-group [nzSuffix]="suffixIconSearch" style="width: 400px">
      <input type="text" nz-input placeholder="请输入搜索内容..." [(ngModel)]="filter" (keyup.enter)="getLibsPage(true)">
    </nz-input-group>
    <ng-template #suffixIconSearch>
      <i nz-icon type="search"></i>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="18" style="text-align: right">
    <button nz-button nzType="primary">
      <i nz-icon type="download" theme="outline"></i>下载
    </button>
  </div>
</div>
<div>
  <nz-table #libTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzTotal]="total"
    [nzLoading]="loading" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="getLibsPage()"
    (nzCurrentPageDataChange)="currentPageDataChange($event)" (nzPageSizeChange)="getLibsPage(true)">
    <thead (nzSortChange)="sort($event)" nzSingleSort>
      <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="checkAll($event)"></th>
        <th nzShowSort nzSortKey="name">库名</th>
        <th nzShowSort nzSortKey="name">等级<i nz-icon type="question-circle" theme="twotone"></i></th>
        <th><span>所属应用</span></th>
        <th nzShowSort nzSortKey="CNNVD"><span>CNNVD</span></th>
        <th nzShowSort nzSortKey="email"><span>CVE</span></th>
        <th><span>当前版本</span></th>
        <th><span>最新版本</span></th>
        <th><span>库的类的总数</span></th>
        <th><span>操作</span></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of libTable.data">
        <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()"></td>
        <td>
          <a routerLink="/layout/assets-management/library/lib-detail" [queryParams]="{hash: data?.hash}">
            {{ data.fileName }}
          </a>
        </td>
        <td>
          <div>
            <!-- {{ data.grade }} -->
            <span [ngSwitch]="data.grade">
              <p *ngSwitchCase="'E'" class="grade-E">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'D'" class="grade-D">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'C'" class="grade-C">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'B'" class="grade-B">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'A'" class="grade-A">
                {{ data.grade }}
              </p>
              <p *ngSwitchDefault class="grade-E">
                --
              </p>
            </span>
          </div>
        </td>
        <td>
          <ng-container *ngFor="let application of data?.applications;let i = index">
            <a *ngIf="i < maxShowNum">
              {{ application.showName }}
              <br>
            </a>
            <a *ngIf="i === maxShowNum">
              更多...
            </a>
          </ng-container>
        </td>
        <td> {{ data.cnnvdNums }} </td>
        <td> {{ data.cveNums }} </td>
        <td> {{ data.fileVersion }} </td>
        <td> {{ data.lastestVersion }} </td>
        <td> {{ data.classUsed }} / {{ data.classCount }} </td>
        <td>查看详情</td>
      </tr>
    </tbody>
  </nz-table>
</div>
